<template>
	<view class="content">
		<view class="layout" v-for="(item,index) in pets" :key="item._id">
			<view class="box">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>	
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="author">
					---{{item.author}}
					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const pets = ref([])
	
	
	
	// 预览图片
	const onPreview = function(index) {
		const urls = pets.value.map(item => item.url)
		uni.previewImage({
			urls,
			current:index
		})
	}
	
	// 请求图片列表
	function getImage() {
		uni.showNavigationBarLoading();
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			method:'GET',
			data:{"size":10,"type":"all"},
			header:{
				"access-key":"12345678@"
			}
		}).then(res => {
			if(res.data.errCode === 0) {
				pets.value = [...pets.value, ...res.data.data];
			} else if (res.data.errCode === 400) {
				uni.showToast({
					title:res.data.errMsg,
					icon:'none'
				})
			}
		}).catch(err => {
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none"
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading();
		})
	}
	getImage();

</script>

<style lang="scss" scoped>
	.content{
		.layout{
			margin: 50rpx;
			.box{
				image{
					width: 100%;
				}
				.text{
					padding: 30rpx;
					font-size: 30rpx;
					color: #333;
				}
				.author {
					padding: 0 30rpx 30rpx;
					text-align: right;
					color: #888;
				}
				border-radius: 15rpx;
				box-shadow: 0 15rpx 30rpx rgb(0,0,0,0.1);
			}
		}
	}
</style>
